On this page, we will demonstrate some event handlers in HTML and JavaScript. Event handlers are pieces of code that handle "events," or actions. These actions are either taken by the user (mouse movements, button clicking, keyboard entry, etc) or the browser (loading or unloading the page, processing an error, etc). These actions cause changes on the webpage for the user and these bits of code "handle" the changes to give us interactive experiences.
The "onlclick" event handler is very common and often used with a button. Click on the button say hello.
We can do the same thing by using the "click" event listener in JavaScript as well. This adds an event handler to an element in the HTML code. Click on this button to say hi this way.
Next, we will look at" onmouseover." This action only needs to happen once to trigger the associated change stay. Move your mouse over the following text to make it red.
I'm important! Pay attention!
Similar to onmouseover, the "onmouseout" event handler makes changes when the user moves the mouse cursor away from an element on page. To see this in action, hover over this paragraph and then move your mouse away from it to change the background color.
The "onchange" event handler can be used to put out a message when the user has changed something on the page, like a new choice in a drop-down menu. To see an example, select a class from the list on classes I am taking this semester.
The "onload" event handler activates once the element it is associated with has loaded. The example given here was the pop-up message welcoming you to this page. The function that instructed this to happen was triggered once the body of this webpage had loaded to the browser. This event handler can be used to ensure all code is loaded before a part of the code is run so there is less chance of encountering an error.
There are many, many more event handlers, but that's all we'll get into here. Hope you enjoyed this demostation of some event handlers!